<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            padding: 16px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            background-color: white;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 32px;
        }

        label {
            margin-top: 16px;
            color: #444;
            font-size: 18px;
        }

        input[type=file] {
            display: none;
        }

        .upload-btn {
            margin-top: 32px;
            padding: 16px 64px;
            background-color: #4498ff;
            color: white;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-btn:hover {
            background-color: #356cce;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .result {
            margin-top: 64px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 16px;
            background-color: white;
            position: relative;
        }

        .result p {
            color: #333;
            font-size: 18px;
            margin-bottom: 8px;
        }

        .category-title {
            text-align: center;
            margin-top: 32px;
            margin-bottom: 16px;
            font-size: 24px;
            font-weight: bold;
            color: #4498ff;
        }

        .value-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .value-container > div {
            width: calc(50% - 8px);
            box-sizing: border-box;
            padding: 8px;
            margin-bottom: 16px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            background-color: #efefef;
        }

        .key {
            color: #666;
            font-size: 18px;
            margin-bottom: 4px;
        }

        .value {
            font-size: 20px;
            font-weight: bold;
            margin-left: 16px;
        }
        /* 省略原有样式内容 */
        .highlight-max {
            background-color:#ffdddd;
            border:3px solid #f44336;
        }
        .highlight-min {
            background-color:#ddffff;
            border:3px solid #03a9f4;
        }

        .result-container {
            display: inline-block;
            margin-right: 20px;
            vertical-align: top;
        }
        /* 新增样式，使“解析数据”和“数据分析”这两个按钮在一排上 */
        #upload-form button {
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 修改了“解析数据”和“数据分析”按钮的顺序，并添加了一个div包裹它们 -->
    <h1>文件上传</h1>
    <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">选择文件：</label>
        <input type="file" id="file" name="file">
        <div>
            <button type="button" class="upload-btn" id="choose-file-btn">上传文件</button>
            <button type="submit" class="upload-btn" id="upload-btn" disabled>解析数据</button>
            <button type="button" class="upload-btn" id="analysis-btn" disabled onclick="gotoTargetPage()">数据分析</button>
        </div>
        <span id="selected-file"></span>
    </form>

    <div class="result" id="result">
        <h2>解析结果：</h2>
    </div>
</div>

<script>
    const form = document.getElementById('upload-form');
    const chooseFileBtn = document.getElementById('choose-file-btn');
    const selectedFileSpan = document.getElementById('selected-file');
    const uploadBtn = document.getElementById('upload-btn');
    const analysisBtn = document.getElementById('analysis-btn'); // 新增获取“数据分析”按钮的代码
    const resultDiv = document.getElementById('result');

    chooseFileBtn.addEventListener('click', () => {
        const fileInput = document.getElementById('file');
        fileInput.click();
    });

    form.addEventListener('submit', async e => {
        e.preventDefault();
        const formData = new FormData(form);

        // 禁用上传按钮，防止用户重复点击
        chooseFileBtn.disabled = true;

        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        render(data);

        fileInput.value = '';  // 重置文件输入元素的值
        chooseFileBtn.disabled = false;  // 启用“上传文件”按钮

        // 解析完文件后启用“解析数据”和“数据分析”这两个按钮
        uploadBtn.disabled = false;
        analysisBtn.disabled = false;
    });

    function render(data) {
        resultDiv.innerHTML = '';
        const outerKeys = Object.keys(data);
        for (const outerKey of outerKeys) {
            const categoryTitle = document.createElement('div');
            categoryTitle.classList.add('category-title');
            categoryTitle.innerText = outerKey;
            resultDiv.appendChild(categoryTitle);

            const innerKeys = Object.keys(data[outerKey]);
            const valueContainer = document.createElement('div');
            valueContainer.classList.add('value-container');
            for (const innerKey of innerKeys) {
                const valueObj = data[outerKey][innerKey];
                const keyDiv = document.createElement('div');
                keyDiv.classList.add('key');
                keyDiv.innerText = `${innerKey}:`;

                const valueDiv = document.createElement('div');
                valueDiv.classList.add('value');
                valueDiv.innerText = valueObj.toString();

                const containerDiv = document.createElement('div');
                containerDiv.appendChild(keyDiv);
                containerDiv.appendChild(valueDiv);
                valueContainer.appendChild(containerDiv);
            }
            resultDiv.appendChild(valueContainer);
        }
    }

    const fileInput = document.getElementById('file');
    fileInput.addEventListener('change', () => {
        const files = fileInput.files;
        if (files && files.length > 0) {
            selectedFileSpan.innerText = files[0].name;
            // 启用“解析数据”和“数据分析”这两个按钮
            uploadBtn.disabled = false;
            analysisBtn.disabled = false;
        } else {
            selectedFileSpan.innerText = "";
            // 禁用“解析数据”和“数据分析”这两个按钮
            uploadBtn.disabled = true;
            analysisBtn.disabled = true;
        }
    });

    function getData() {
        const inputs = document.querySelectorAll('input[type="text"]'); // 获取所有type为text的input元素
        const result = {};
        inputs.forEach(input => {
            const key = input.getAttribute('name');
            const value = input.value;
            result[key] = value;
        });
        return result;
    }
    function gotoTargetPage() {
        const data = JSON.stringify(getData()); // 获取数据并序列化为JSON格式字符串
        window.location.href = `targetPage.html?data=${encodeURIComponent(data)}`; // 跳转到目标页面，并携带参数
    }
</script>
</body>
</html>